<style scoped>
.layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
}

.layout-breadcrumb {
    padding: 10px 15px 0;
}
.layout-content {
    min-height: 672px;
    margin: 5px;
    width: 100%;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
}
.layout-content-main {
    padding: 10px;
    margin: 0;
}
.layout-copy {
    text-align: center;
    padding: 10px 0 20px;
    color: #9ea7b4;
}
.layout-menu-left {
    background: #464c5b;
}
.layout-header {
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.layout-logo-left {
    width: 90%;
    /* height: 30px; */
    background: #5b6270;
    border-radius: 3px;
    margin: 15px auto;
    color: #464c5b;
}
.layout-content-main {
    color: white;
}
</style>
<template>
    <div class="layout">
        <Row type="flex">
            <i-col span="3" class="layout-menu-left">
                <Menu
                    active-name="1-2"
                    theme="dark"
                    width="auto"
                    :open-names="['1']"
                >
                    <div class="layout-logo-left">
                        <Card v-if="username.length">
                            <div
                                style="
                                    text-align: center;
                                    font-weight: 600;
                                    font-size: 15px;
                                "
                            >
                                用户：{{ username[0] }}
                                <br />
                                <Button
                                    style="
                                        background-color: #464c5b;
                                        color: white;
                                    "
                                    size="large"
                                    @click="logout"
                                    >注销</Button
                                >
                            </div>
                        </Card>
                        <Card v-else>
                            <div style="text-align: center">
                                <Button
                                    style="
                                        background-color: #464c5b;
                                        color: white;
                                    "
                                    size="large"
                                    @click="toLogin"
                                    >登录</Button
                                >
                            </div>
                        </Card>
                    </div>

                    <router-link to="/home">
                        <Menu-item name="1">
                            <Icon type="ios-paper"></Icon>
                            首页
                        </Menu-item></router-link
                    >
                    <Submenu name="2">
                        <template slot="title">
                            <Icon type="ios-navigate"></Icon>
                            个人信息管理
                        </template>
                        <router-link to="/info">
                            <Menu-item name="2-1">
                                个人信息
                            </Menu-item></router-link
                        >
                        <router-link to="records">
                            <Menu-item name="2-3"
                                >仿真记录</Menu-item
                            ></router-link
                        >
                    </Submenu>
                    <Submenu name="3">
                        <template slot="title">
                            <Icon type="ios-keypad"></Icon>数据
                        </template>
                        <Menu-item name="3-3">数据导入</Menu-item>
                        <router-link to="/playback">
                            <Menu-item name="3-4"
                                >车流回放</Menu-item
                            ></router-link
                        >
                    </Submenu>
                    <Submenu name="4">
                        <template slot="title">
                            <Icon type="ios-analytics"></Icon>
                            分析预测
                        </template>
                        <router-link to="/echarts">
                            <Menu-item name="4-2"
                                >数据对比</Menu-item
                            ></router-link
                        >
                    </Submenu>
                    <Submenu name="5">
                        <template slot="title">
                            <Icon type="ios-analytics"></Icon>
                            帮助中心
                        </template>
                        <Menu-item name="5-1">平台介绍</Menu-item>
                        <Menu-item name="5-2">关于我们</Menu-item>
                        <router-link to="/feedback">
                            <Menu-item name="5-3"
                                >意见反馈</Menu-item
                            ></router-link
                        >
                    </Submenu>
                </Menu>
            </i-col>
            <i-col span="21" class="layout-container">
                <div class="layout-header"></div>
                <!-- <div class="layout-breadcrumb">
                    <Breadcrumb>
                        <Breadcrumb-item href="#">首页</Breadcrumb-item>
                        <Breadcrumb-item href="#">应用中心</Breadcrumb-item>
                        <Breadcrumb-item>某应用</Breadcrumb-item>
                    </Breadcrumb>
                </div> -->
                <div class="layout-content">
                    <div class="layout-content-main">
                        <!-- 指定组件呈现位置 -->
                        <router-view></router-view>
                    </div>
                </div>
                <div class="layout-copy">2022-01 &copy; 张加林</div>
            </i-col>
        </Row>
    </div>
</template>
<script>
import { mapState } from "vuex";
export default {
    components: {},
    computed: {
        ...mapState(["username"]),
    },
    methods: {
        toLogin() {
            this.$router.push("/login");
        },
        logout() {
            this.$router.push("/login");
            this.$store.state.username = [];
        },
    },
};
</script>